<template>
  <el-container>
    <el-header>
      <!-- 头部开始 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item style="cursor:pointer" :to="{path: '/statistics-item1'}">业绩统计</el-breadcrumb-item>
        <el-breadcrumb-item style="cursor:pointer" :to="{path: '/statistics-item2'}">课消统计</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 头部结束 -->
    </el-header>
    <el-main>
      <div class="mian-header">
        <div class="main-header-con">
          <!-- <span>今日&nbsp;&nbsp;&nbsp;&nbsp;本周&nbsp;&nbsp;&nbsp;&nbsp;本月&nbsp;&nbsp;&nbsp;&nbsp;</span> -->
          <ul>
            <li>今日</li>
            <li>本周</li>
            <li>本月</li>
          </ul>
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <p>校区：</p>
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="clear_both"></div>
      </div>
      <!-- 图标下方数据 -->
      <div class="mian-content">
        <div class="mian-content-header">
          <h1>课消统计</h1>
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
            <el-radio-button label="top">一对一</el-radio-button>
            <el-radio-button label="right">课次班</el-radio-button>
            <el-radio-button label="bottom">课时班</el-radio-button>
            <el-radio-button label="left">时长班</el-radio-button>
            <el-radio-button label="left1">混合课程</el-radio-button>
          </el-radio-group>
        </div>
        <!-- 图标部分开始 -->
        <div class="main-header-table">
          <div class="main-header-table-box">
            <div class="main-header-table-left">
              <h2>业绩占比</h2>
              <div id="main" style="width: 600px;height:330px;"></div>
            </div>
            <div class="main-header-table-right">
              <h2>总业绩趋势</h2>
              <div id="main1" style="width: 600px;height:330px;"></div>
            </div>
          </div>
        </div>
        <!-- 图标部分结束 -->
      </div>
      <div class="main-content-footer">
        <div class="main-content-theWay">
          <div class="main-content-title">
            <p class="mian_p">签到方式：</p>
            <el-select v-model="value3" clearable placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value3"
                :label="item.label"
                :value="item.value3"
              ></el-option>
            </el-select>
          </div>
          <div class="main-content-title1">
            <p class="mian_p">签到时间:</p>
            <el-time-picker
              is-range
              v-model="value1"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            ></el-time-picker>
          </div>
          <div class="main-content-title2">
            <p class="mian_p">搜索：</p>
            <!-- <div class="student1">
              <el-select v-model="value4" clearable placeholder="学生">
                <el-option
                  v-for="item in options3"
                  :key="item.value4"
                  :label="item.label"
                  :value="item.value4"
                ></el-option>
              </el-select>
              <el-select class="main_select" v-model="value" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>-->
            <div class="searchFor">
              <el-input placeholder="请输入内容" v-model="tableData.name" class="input-with-select">
                <el-select class="searchFor-sel" v-model="value8" slot="prepend" placeholder="选择">
                  <!-- <el-option label="餐厅名" value="1"></el-option>
                  <el-option label="订单号" value="2"></el-option>
                  <el-option label="用户电话" value="3"></el-option>-->
                </el-select>
                <el-button @click="searchFor" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </div>
        </div>
        <div class="main-content-theWay2">
          <div class="main-content-title">
            <p class="mian_p">签到状态：</p>
            <el-select v-model="value5" clearable placeholder="请选择">
              <el-option
                v-for="item in options4"
                :key="item.value5"
                :label="item.label"
                :value="item.value5"
              ></el-option>
            </el-select>
          </div>
          <div class="main-content-title">
            <p class="mian_p">签到类型:</p>
            <el-select v-model="value6" clearable placeholder="请选择">
              <el-option
                v-for="item in options5"
                :key="item.value6"
                :label="item.label"
                :value="item.value6"
              ></el-option>
            </el-select>
          </div>
          <div class="main-content-title">
            <p class="mian_p">选择课程：</p>
            <div class="student1">
              <el-select v-model="value7" clearable placeholder="请选择">
                <el-option
                  v-for="item in options6"
                  :key="item.value7"
                  :label="item.label"
                  :value="item.value7"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="main-content-theWay3">
          <div class="main-content-title">
            <p class="mian_p">选择老师：</p>
            <el-select v-model="value9" clearable placeholder="请选择">
              <el-option
                v-for="item in options8"
                :key="item.value9"
                :label="item.label"
                :value="item.value9"
              ></el-option>
            </el-select>
          </div>
          <div class="main-content-title">
            <p class="mian_p">选择学员:</p>
            <el-select v-model="value8" clearable placeholder="请选择">
              <el-option
                v-for="item in options7"
                :key="item.value8"
                :label="item.label"
                :value="item.value8"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="main-content-consumption">
          <div class="main-content-con1">
            <p>
              签到记录:
              <span>{{this.tableData.length}}</span>条
              <span></span>
            </p>
            <p>
              消费总金额:
              <span>{{allprice}}元</span>
            </p>
          </div>
          
          <div class="main-content-con2">
            <el-row>
              <el-button type="danger" @click.stop="handleItem">添加一行</el-button>
            </el-row>
          </div>
        </div>
        <div class="main-content-table2">
          <el-table
            ref="multipleTable"
            :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <!-- <el-table-column label="日期" width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>-->
            <el-table-column prop="name" label="姓名" width="60"></el-table-column>
            <el-table-column prop="address" width="120" label="课程名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name1" label="上课老师" width="80"></el-table-column>
            <el-table-column prop="time1" label="上课时间" width="110"></el-table-column>
            <el-table-column prop="status1" label="签到状态" width="80"></el-table-column>
            <el-table-column prop="time2" label="签到时间" width="110"></el-table-column>
            <el-table-column prop="theWay" label="签到方式" width="80"></el-table-column>
            <el-table-column prop="typesOf" label="签到类型" width="80"></el-table-column>
            <el-table-column prop="price" label="消费金额" width="80"></el-table-column>
            <el-table-column prop="price1" label="消费折扣金额" width="120"></el-table-column>
            <el-table-column prop="remarks" label="备注" width="120"></el-table-column>
            <el-table-column prop="remarks" label="操作" width="80">
              <el-button size="mini" type="danger" @click="handleDelete( tableData.name)">删除</el-button>
            </el-table-column>
            <!-- <el-row>

            </el-row>-->
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :page-sizes="[1, 3, 5]"
            :page-size="pagesize"
            :total="this.tableData.length"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script src="echarts.min.js"></script>
<script>
//导入echarts
import echarts from "echarts";
export default {
  name: "statistics-item2",
  data() {
    return {
      pagesize: 3,/*每页几个  */
      currpage: 1,
      tableData: [],/* 分页器数据 */
      value1: [new Date(2020, 8, 25, 8, 40), new Date(2020, 8, 25, 9, 40)],
      tabPosition: "left",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      options: [
        {
          value: "选项1",
          label: "宝安校区",
        },
        {
          value: "选项2",
          label: "南山校区",
        },
        {
          value: "选项3",
          label: "福田校区",
        },
        {
          value: "选项4",
          label: "罗湖校区",
        },
        {
          value: "选项5",
          label: "盐田校区",
        },
      ],
      options2: [
        {
          value3: "排课签到",
          // label: "",
        },
        {
          value3: "临时签到",
          // label: "",
        },
        {
          value3: "任意上课",
          // label: "",
        },
      ],
      options3: [
        {
          value4: "暮暮",
          // label: "",
        },
        {
          value4: "倩倩",
          // label: "",
        },
        {
          value4: "米米",
          // label: "",
        },
        {
          value4: "张张",
          // label: "",
        },
      ],
      options4: [
        {
          value5: "已上课",
          // label: "",
        },
        {
          value5: "请假",
          // label: "",
        },
        {
          value5: "扣课时",
          // label: "",
        },
      ],
      options5: [
        {
          value6: "正常",
          // label: "",
        },
        {
          value6: "补课",
          // label: "",
        },
        {
          value6: "补签",
          // label: "",
        },
        {
          value6: "插班",
          // label: "",
        },
      ],
      options6: [
        {
          value7: "芭蕾舞初级班",
          // label: "",
        },
        {
          value7: "小提琴初级班",
          // label: "小提琴初级班",
        },
        {
          value7: "芭蕾舞高级班",
          // label: "",
        },
        {
          value7: "街舞初级班",
          // label: "",
        },
      ],
      options7: [
        {
          value8: "暮暮",
          // label: "",
        },
        {
          value8: "米米",
          // label: "",
        },
        {
          value8: "张张",
          // label: "",
        },
        {
          value8: "倩倩",
          // label: "",
        },
        {
          value8: "天天",
          // label: "",
        },
        {
          value8: "夏夏",
          // label: "",
        },
        {
          value8: "小明",
          // label: "",
        },
        {
          value8: "张倩",
          // label: "",
        },
        {
          value8: "李暮",
          // label: "",
        },
        {
          value8: "小米",
          // label: "",
        },
        {
          value8: "小张",
          // label: "",
        },
        {
          value8: "小倩",
          // label: "",
        },
        {
          value8: "小暮",
          // label: "",
        },
        {
          value8: "大米",
          // label: "",
        },
        {
          value8: "大张",
          // label: "",
        },
        {
          value8: "大倩",
          // label: "",
        },
        {
          value8: "中暮",
          // label: "",
        },
        {
          value8: "中米",
          // label: "",
        },
        {
          value8: "中张",
          // label: "",
        },
        {
          value8: "中倩",
          // label: "",
        },
      ],
      options8: [
        {
          value9: "王老师",
          // label: "",
        },
        {
          value9: "王老师、包老师",
          label: "",
        },
        {
          value9: "张老师",
          label: "",
        },
        {
          value9: "包老师",
          label: "",
        },
      ],
      value: "",
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      value7: "",
      value8: "",
      value9: "",
      // 总消费
      price2: "",
      multipleSelection: [],
    };
  },
  //此时页面上的元素渲染完毕
  mounted() {
    //总业绩的方法
    this.circleChart();
    this.treeTable();
    this.searchFor();
    this.$axios
      .get("/app/mock/264777/example/1598250282727")
      .then((res) => {
        this.tableData = res;
        console.log(this.tableData);
      })
      .catch((err) => console.log(err));
    this.tableData = localStorage.tableData?JSON.parse(localStorage.tableData): []
  },
  methods: {
    //搜索
    searchFor(){
      this.$axios
      .get("/app/mock/264777/example/1598250282727")
      .then((res) => {
        this.tableData = res;
        console.log(this.tableData);
      })
      .catch((err) => console.log(err));
    },
    // 圆标
    circleChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "签到状态占比",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],

            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
          },
          {
            name: "条数",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
              { value: 120, name: "已上课" },
              { value: 120, name: "请假" },
              { value: 120, name: "扣课时" },
              { value: 135, name: "未签" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 树状表
    treeTable() {
      let myChart = echarts.init(document.getElementById("main1"));
      let option = {
        title: {
          text: "动态数据",
          subtext: "纯属虚构",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56",
            },
          },
        },
        legend: {
          data: ["最新成交价", "预购队列"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: (function () {
              var now = new Date();
              var res = [];
              var len = 10;
              while (len--) {
                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
                now = new Date(now - 2000);
              }
              return res;
            })(),
          },
          {
            type: "category",
            boundaryGap: true,
            data: (function () {
              var res = [];
              var len = 10;
              while (len--) {
                res.push(10 - len - 1);
              }
              return res;
            })(),
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            name: "价格",
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
          {
            // type: "value",
            // scale: true,
            // name: "预购量",
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
        ],
        series: [
          {
            name: "预购队列",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: (function () {
              var res = [];
              var len = 10;
              while (len--) {
                res.push(Math.round(Math.random() * 1000));
              }
              return res;
            })(),
          },
          {
            name: "最新成交价",
            type: "line",
            data: (function () {
              var res = [];
              var len = 0;
              while (len < 10) {
                res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                len++;
              }
              return res;
            })(),
          },
        ],
      };

      app.count = 11;
      setInterval(function () {
        var axisData = new Date().toLocaleTimeString().replace(/^\D*/, "");

        var data0 = option.series[0].data;
        var data1 = option.series[1].data;
        data0.shift();
        data0.push(Math.round(Math.random() * 1000));
        data1.shift();
        data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

        option.xAxis[0].data.shift();
        option.xAxis[0].data.push(axisData);
        option.xAxis[1].data.shift();
        option.xAxis[1].data.push(app.count++);

        myChart.setOption(option);
      }, 2100);
      myChart.setOption(option);
    },
    //表格
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //添加一行
    handleItem() {
      // if(!)
      // console.log(this.item.name);
      console.log(this.value8);
      if (
        this.value8 &&
        this.value3 &&
        this.value5 &&
        this.value6 &&
        this.value7 &&
        this.value9
      ) {
        let newTable = {
          name: this.value8,
          // name: ,
          address: this.value7,
          name1: this.value9,
          time1: "13:30-14:00",
          // time1: this.value1,
          status1: this.value5,
          time2: "13:30-14:00",
          theWay: this.value3,
          typesOf: this.value6,
          price: (Math.random() * 100 + 400).toFixed(0) + "元",
          price1: (Math.random() * 300 + 100).toFixed(0) + "元",
          remarks: "这里是备注",
        };
        this.tableData.push(newTable);
        this.saveDate();
        this.value3 = "";
        this.value5 = "";
        this.value6 = "";
        this.value7 = "";
        this.value8 = "";
        this.value9 = "";
        console.log(newTable);
      } else {
        alert("没有添加对应的条件 不能添加");
        return false;
      }
    },
    //删除一行
    handleDelete(index) {
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.saveDate();
        })
        .catch(() => {});
    },

    //分页

    // //监听页码值  改变的事件
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
    // 监听pagesize
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    // 讲数据保存到本地存储
    saveDate(){
      localStorage.tableData = JSON.stringify(this.tableData)
    }
  },
  //计算总消费
  computed: {
    allprice() {
      let num = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        num += parseInt(this.tableData[i].price1);
      }
      return num;
    },
  },
  
};
</script>
<style scoped>
/* 分页 */
.block {
  text-align: center;
}
/* 搜索 */
.searchFor {
  width: 300px;
  height: 40px;
  /* background: pink; */
  line-height: 40px;
}
.searchFor .searchFor-sel {
  height: 40px;
}
.el-breadcrumb {
  height: 65px;
  /* background: pink; */
  line-height: 65px;
  font-size: 14px;
}
.el-breadcrumb-item {
  line-height: 65px;
  /* background: #ccc; */
}
.main-header {
  height: 65px;
  /* background: pink; */
  /* line-height: 65px; */
}
.main-header-con {
  width: 960px;
  height: 65px;
  float: right;
  /* background: #ccc; */
  line-height: 65px;
  display: flex;
}
.clear_both {
  clear: both;
}
.main-header-con ul li {
  display: inline-block;
  color: #808183;
  padding: 0 15px;
}
.main-header-con .block {
  margin: 0 20px;
}
.el-select {
  width: 271px;
}
.mian-content {
  height: 465px;
  background: #fff;
  padding: 20px;
}

/* 内容头部 */
.mian-content-header {
  height: 50px;
  display: flex;
}
.mian-content-header h1 {
  font-size: 18px;
  color: #000000;
  margin-right: 300px;
}
/* .el-tab-pane{
  width: 90px;
  text-align: center;
  border: 1px solid #ccc;
  /* background: #ccc; 
} */
/* 图标样式 */
/* 图表 */
.main-header-table-box {
  /* background: #808183; */
  height: 355px;
  margin-top: 20px;
  display: flex;
}
.main-header-table {
  /* height: 350px; */
  background: #fff;
  /* padding: 20px; */
}
.main-header-table h1 {
  font-size: 18px;
  /* color: #61a7e8; */

  width: 100%;
  height: 30px;
}
.main-header-table-left {
  width: 570px;
  height: 355px;
  /* background: #ccc; */
  float: left;
}
.main-header-table-right {
  overflow: hidden;
  width: 600px;
  height: 355px;
  background: #fff;
  float: right;
}
.main-header-table-left h2 {
  color: #5a7fa2;
  font-size: 16px;
  /* margin-top: 50px; */
}
.main-header-table-right h2 {
  color: #5a7fa2;
  font-size: 16px;
  /* margin-top: 50px; */
}

/* 最后一个模块 */
.el-select {
  width: 268px;
  height: 65px;
}
.main-content-footer {
  height: 543px;
  padding: 10px;
  /* background: chartreuse; */
}
.main-content-theWay {
  height: 65px;
}
.main-content-theWay .mian_p {
  font-size: 14px;
  color: #272727;
}
.main-content-title {
  width: 340px;
  height: 65px;
  /* background: #808183; */
  display: flex;
  line-height: 65px;
  align-items: center;
}
.main-content-theWay {
  display: flex;
}
.main-content-title1 {
  width: 420px;
  height: 65px;
  /* background: chocolate; */
  display: flex;
  align-items: center;
  line-height: 65px;
  margin: 0 0 0 15px;
}

.main-content-title2 .el-select {
  width: 80px;
}
.student1 .main_select {
  width: 200px;
}
.main-content-title2 {
  width: 400px;
  height: 65px;
  /* background: chocolate; */
  display: flex;
  align-items: center;
  line-height: 65px;
  padding-left: 32px;
}

.main-content-theWay2 {
  display: flex;
  justify-content: space-between;
}
.main-content-theWay2 .main-content-title {
  width: 368px;
}
.main-content-theWay2 .mian_p {
  font-size: 14px;
  color: #272727;
}
.main-content-theWay3 {
  display: flex;
  /* justify-content: space-between; */
}
.main-content-theWay3 .main-content-title {
  width: 368px;
  margin-right: 36px;
}
.main-content-theWay3 .mian_p {
  font-size: 14px;
  color: #272727;
}

/* 消费 */
.main-content-consumption {
  height: 60px;
  /* background: #808183; */
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
.main-content-con1 {
  display: flex;
}
.main-content-con1 p {
  font-size: 14px;
  margin-right: 15px;
}
</style>
